<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript 风格指南 | 皮卡车</title>
    <meta name="description" content="皮卡车的文档, vuepress 文档">
    <meta name="generator" content="VuePress 1.3.1">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="icon" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="google-site-verification" content="Ld_AEWr30siza2LmmZ12csitRGsSj9gqqEAch0UXkTc">
    
    <link rel="preload" href="/assets/css/0.styles.1a6a4f51.css" as="style"><link rel="preload" href="/assets/js/app.1f0f93c9.js" as="script"><link rel="preload" href="/assets/js/2.f28f3227.js" as="script"><link rel="preload" href="/assets/js/79.14676976.js" as="script"><link rel="preload" href="/assets/js/3.a7eaa85f.js" as="script"><link rel="prefetch" href="/assets/js/10.7b76d38f.js"><link rel="prefetch" href="/assets/js/100.0d62a3f6.js"><link rel="prefetch" href="/assets/js/101.4916ac0c.js"><link rel="prefetch" href="/assets/js/102.0ee21f66.js"><link rel="prefetch" href="/assets/js/103.872c594c.js"><link rel="prefetch" href="/assets/js/104.0bff815e.js"><link rel="prefetch" href="/assets/js/105.46330c43.js"><link rel="prefetch" href="/assets/js/106.4ad211ca.js"><link rel="prefetch" href="/assets/js/107.d9011871.js"><link rel="prefetch" href="/assets/js/108.bab8ed0e.js"><link rel="prefetch" href="/assets/js/109.b7e4a790.js"><link rel="prefetch" href="/assets/js/11.518e0dbb.js"><link rel="prefetch" href="/assets/js/110.1eb492e8.js"><link rel="prefetch" href="/assets/js/111.ee6a2e31.js"><link rel="prefetch" href="/assets/js/112.05d655c6.js"><link rel="prefetch" href="/assets/js/113.0a4cf8f0.js"><link rel="prefetch" href="/assets/js/114.ef783947.js"><link rel="prefetch" href="/assets/js/115.11bbdb9c.js"><link rel="prefetch" href="/assets/js/116.5646126d.js"><link rel="prefetch" href="/assets/js/117.854d26bf.js"><link rel="prefetch" href="/assets/js/118.1e514b13.js"><link rel="prefetch" href="/assets/js/119.aa944f45.js"><link rel="prefetch" href="/assets/js/12.511e3547.js"><link rel="prefetch" href="/assets/js/120.1c6f450c.js"><link rel="prefetch" href="/assets/js/121.44f16ee6.js"><link rel="prefetch" href="/assets/js/122.f877b8e8.js"><link rel="prefetch" href="/assets/js/123.0563fdd5.js"><link rel="prefetch" href="/assets/js/124.4cd97316.js"><link rel="prefetch" href="/assets/js/125.a502f4ee.js"><link rel="prefetch" href="/assets/js/126.c7e94093.js"><link rel="prefetch" href="/assets/js/127.bd8aed7f.js"><link rel="prefetch" href="/assets/js/128.66063cc3.js"><link rel="prefetch" href="/assets/js/129.21bb1073.js"><link rel="prefetch" href="/assets/js/13.9e5bee4e.js"><link rel="prefetch" href="/assets/js/130.c8edfccb.js"><link rel="prefetch" href="/assets/js/131.7a1f29be.js"><link rel="prefetch" href="/assets/js/132.f589fc06.js"><link rel="prefetch" href="/assets/js/133.55ac5c9a.js"><link rel="prefetch" href="/assets/js/134.eeab127b.js"><link rel="prefetch" href="/assets/js/135.5a1571dd.js"><link rel="prefetch" href="/assets/js/136.b72b4d1c.js"><link rel="prefetch" href="/assets/js/137.678e022a.js"><link rel="prefetch" href="/assets/js/138.ba4108fa.js"><link rel="prefetch" href="/assets/js/139.0b02b599.js"><link rel="prefetch" href="/assets/js/14.b9ec07e6.js"><link rel="prefetch" href="/assets/js/140.690e4e4c.js"><link rel="prefetch" href="/assets/js/141.709da4ed.js"><link rel="prefetch" href="/assets/js/142.f2de76c0.js"><link rel="prefetch" href="/assets/js/143.4dcb17f0.js"><link rel="prefetch" href="/assets/js/144.730ef429.js"><link rel="prefetch" href="/assets/js/145.d881c754.js"><link rel="prefetch" href="/assets/js/146.f3379a41.js"><link rel="prefetch" href="/assets/js/147.eeb9ca6f.js"><link rel="prefetch" href="/assets/js/148.bb6020cd.js"><link rel="prefetch" href="/assets/js/149.1d34dea6.js"><link rel="prefetch" href="/assets/js/15.d0fa1a9d.js"><link rel="prefetch" href="/assets/js/150.599238ba.js"><link rel="prefetch" href="/assets/js/151.9655268f.js"><link rel="prefetch" href="/assets/js/152.1f843fa4.js"><link rel="prefetch" href="/assets/js/153.7af45ca6.js"><link rel="prefetch" href="/assets/js/154.eff93a56.js"><link rel="prefetch" href="/assets/js/155.ff07fba4.js"><link rel="prefetch" href="/assets/js/156.1b1814b7.js"><link rel="prefetch" href="/assets/js/157.8ac4c21b.js"><link rel="prefetch" href="/assets/js/158.aa8a0124.js"><link rel="prefetch" href="/assets/js/159.d61fdb37.js"><link rel="prefetch" href="/assets/js/16.ccd2bd60.js"><link rel="prefetch" href="/assets/js/17.ddc8fde4.js"><link rel="prefetch" href="/assets/js/18.a06e60cc.js"><link rel="prefetch" href="/assets/js/19.64b3dec9.js"><link rel="prefetch" href="/assets/js/20.3615e182.js"><link rel="prefetch" href="/assets/js/21.0c654d53.js"><link rel="prefetch" href="/assets/js/22.720aac8f.js"><link rel="prefetch" href="/assets/js/23.0dc53b91.js"><link rel="prefetch" href="/assets/js/24.d4b75b0e.js"><link rel="prefetch" href="/assets/js/25.9120702e.js"><link rel="prefetch" href="/assets/js/26.b24d89e2.js"><link rel="prefetch" href="/assets/js/27.55df94ab.js"><link rel="prefetch" href="/assets/js/28.250c68a5.js"><link rel="prefetch" href="/assets/js/29.75a3c8f3.js"><link rel="prefetch" href="/assets/js/30.8cdc2fcd.js"><link rel="prefetch" href="/assets/js/31.45303d68.js"><link rel="prefetch" href="/assets/js/32.f4225739.js"><link rel="prefetch" href="/assets/js/33.15b21267.js"><link rel="prefetch" href="/assets/js/34.5baca30b.js"><link rel="prefetch" href="/assets/js/35.5d9dfab1.js"><link rel="prefetch" href="/assets/js/36.981eadca.js"><link rel="prefetch" href="/assets/js/37.cead7f6b.js"><link rel="prefetch" href="/assets/js/38.ee6bcaf1.js"><link rel="prefetch" href="/assets/js/39.e7579788.js"><link rel="prefetch" href="/assets/js/4.494c614b.js"><link rel="prefetch" href="/assets/js/40.01d2b30b.js"><link rel="prefetch" href="/assets/js/41.19cf06ce.js"><link rel="prefetch" href="/assets/js/42.15941cde.js"><link rel="prefetch" href="/assets/js/43.66adb73c.js"><link rel="prefetch" href="/assets/js/44.8d99ed62.js"><link rel="prefetch" href="/assets/js/45.12ea9159.js"><link rel="prefetch" href="/assets/js/46.644efa88.js"><link rel="prefetch" href="/assets/js/47.531131c7.js"><link rel="prefetch" href="/assets/js/48.b214f000.js"><link rel="prefetch" href="/assets/js/49.e42d4b72.js"><link rel="prefetch" href="/assets/js/5.7e277dc8.js"><link rel="prefetch" href="/assets/js/50.de0aa85c.js"><link rel="prefetch" href="/assets/js/51.8be2974c.js"><link rel="prefetch" href="/assets/js/52.cc067888.js"><link rel="prefetch" href="/assets/js/53.4ceb2c6b.js"><link rel="prefetch" href="/assets/js/54.b2647058.js"><link rel="prefetch" href="/assets/js/55.dc3df953.js"><link rel="prefetch" href="/assets/js/56.921a6934.js"><link rel="prefetch" href="/assets/js/57.1e24b1fd.js"><link rel="prefetch" href="/assets/js/58.f4e8ebac.js"><link rel="prefetch" href="/assets/js/59.17ab117b.js"><link rel="prefetch" href="/assets/js/6.4014218f.js"><link rel="prefetch" href="/assets/js/60.352cea9b.js"><link rel="prefetch" href="/assets/js/61.77289388.js"><link rel="prefetch" href="/assets/js/62.ec0ed919.js"><link rel="prefetch" href="/assets/js/63.c75dcb25.js"><link rel="prefetch" href="/assets/js/64.59d15a75.js"><link rel="prefetch" href="/assets/js/65.7e5a14bb.js"><link rel="prefetch" href="/assets/js/66.4e770ba1.js"><link rel="prefetch" href="/assets/js/67.0742f21a.js"><link rel="prefetch" href="/assets/js/68.a6ed34fd.js"><link rel="prefetch" href="/assets/js/69.48c9a47f.js"><link rel="prefetch" href="/assets/js/7.c5ecd7d3.js"><link rel="prefetch" href="/assets/js/70.eb477192.js"><link rel="prefetch" href="/assets/js/71.1be57009.js"><link rel="prefetch" href="/assets/js/72.6859561c.js"><link rel="prefetch" href="/assets/js/73.aae65018.js"><link rel="prefetch" href="/assets/js/74.59d76d34.js"><link rel="prefetch" href="/assets/js/75.04e23427.js"><link rel="prefetch" href="/assets/js/76.74d6eb6a.js"><link rel="prefetch" href="/assets/js/77.fba76057.js"><link rel="prefetch" href="/assets/js/78.0da94b25.js"><link rel="prefetch" href="/assets/js/8.08c85334.js"><link rel="prefetch" href="/assets/js/80.7494721f.js"><link rel="prefetch" href="/assets/js/81.f04f6229.js"><link rel="prefetch" href="/assets/js/82.e4c6f74b.js"><link rel="prefetch" href="/assets/js/83.81ad8dbf.js"><link rel="prefetch" href="/assets/js/84.d28e4a3d.js"><link rel="prefetch" href="/assets/js/85.d99fa7fa.js"><link rel="prefetch" href="/assets/js/86.597ecadb.js"><link rel="prefetch" href="/assets/js/87.e6d21734.js"><link rel="prefetch" href="/assets/js/88.b43a52d4.js"><link rel="prefetch" href="/assets/js/89.a5ba287d.js"><link rel="prefetch" href="/assets/js/9.658cd6b3.js"><link rel="prefetch" href="/assets/js/90.c253df12.js"><link rel="prefetch" href="/assets/js/91.8946a93d.js"><link rel="prefetch" href="/assets/js/92.8b8f1ae0.js"><link rel="prefetch" href="/assets/js/93.aa73c784.js"><link rel="prefetch" href="/assets/js/94.9326bcc7.js"><link rel="prefetch" href="/assets/js/95.46b64b79.js"><link rel="prefetch" href="/assets/js/96.61a9b0b9.js"><link rel="prefetch" href="/assets/js/97.65a03aad.js"><link rel="prefetch" href="/assets/js/98.7aa56ed0.js"><link rel="prefetch" href="/assets/js/99.a652c8d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.1a6a4f51.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">皮卡车</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link router-link-active">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>CLEAN</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/more/clean/" class="sidebar-link">首页</a></li><li><a href="/more/clean/docs.html" class="sidebar-link">文档 风格指南</a></li><li><a href="/more/clean/javascript.html" class="active sidebar-link">JavaScript 风格指南</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#变量" class="sidebar-link">变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-用有意义且常用的单词命名变量" class="sidebar-link">1. 用有意义且常用的单词命名变量</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-同类型的变量命名保持一致" class="sidebar-link">2. 同类型的变量命名保持一致</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_3-命名常量" class="sidebar-link">3. 命名常量</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_4-解释变量" class="sidebar-link">4. 解释变量</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_5-显示映射" class="sidebar-link">5. 显示映射</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_6-避免无意义的前缀" class="sidebar-link">6. 避免无意义的前缀</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_7-使用参数默认值" class="sidebar-link">7. 使用参数默认值</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#函数" class="sidebar-link">函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-更少的函数参数" class="sidebar-link">1. 更少的函数参数</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-函数单一原则" class="sidebar-link">2. 函数单一原则</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_3-顾名思义" class="sidebar-link">3. 顾名思义</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_4-函数应该只有一层抽象" class="sidebar-link">4. 函数应该只有一层抽象</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_5-删除重复的代码" class="sidebar-link">5. 删除重复的代码</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_6-对象设置默认属性" class="sidebar-link">6. 对象设置默认属性</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_7-不要给函数传递-flag" class="sidebar-link">7. 不要给函数传递 flag</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_8-避免副作用（1）" class="sidebar-link">8. 避免副作用（1）</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_9-避免副作用（2）" class="sidebar-link">9. 避免副作用（2）</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_10-避免全局函数" class="sidebar-link">10. 避免全局函数</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_11-相对于命令式编程更喜欢函数式编程" class="sidebar-link">11. 相对于命令式编程更喜欢函数式编程</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_12-封装条件语句" class="sidebar-link">12. 封装条件语句</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_13-避免取反条件" class="sidebar-link">13. 避免取反条件</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_14-避免条件语句" class="sidebar-link">14. 避免条件语句</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_15-避免类型检查（1）" class="sidebar-link">15. 避免类型检查（1）</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_16-避免类型检查（2）" class="sidebar-link">16. 避免类型检查（2）</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_17-不要过度优化" class="sidebar-link">17. 不要过度优化</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_18-删除废弃代码" class="sidebar-link">18. 删除废弃代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#对象和数据结构" class="sidebar-link">对象和数据结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-使用-getters-和-setters" class="sidebar-link">1. 使用 getters 和 setters</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-使用私有变量" class="sidebar-link">2. 使用私有变量</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#类" class="sidebar-link">类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-使用-class" class="sidebar-link">1. 使用 Class</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-链式调用" class="sidebar-link">2. 链式调用</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_3-继承的组合" class="sidebar-link">3. 继承的组合</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#solid" class="sidebar-link">SOLID</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-单一功能原则" class="sidebar-link">1. 单一功能原则</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-开闭原则" class="sidebar-link">2. 开闭原则</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_3-里氏替换原则" class="sidebar-link">3. 里氏替换原则</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_4-接口隔离原则" class="sidebar-link">4. 接口隔离原则</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_5-依赖反转原则" class="sidebar-link">5. 依赖反转原则</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#测试" class="sidebar-link">测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-单一测试" class="sidebar-link">1. 单一测试</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#并发" class="sidebar-link">并发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-使用-promise-替代回调函数" class="sidebar-link">1. 使用 Promise 替代回调函数</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-async-await-比-promise-更简洁" class="sidebar-link">2. Async/Await 比 Promise 更简洁</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#错误处理" class="sidebar-link">错误处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-不要忽略抛出异常" class="sidebar-link">1. 不要忽略抛出异常</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-不要忽略抛出-promise-异常" class="sidebar-link">2. 不要忽略抛出 Promise 异常</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#格式" class="sidebar-link">格式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-常量大写" class="sidebar-link">1. 常量大写</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-先声明后调用" class="sidebar-link">2. 先声明后调用</a></li></ul></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#注释" class="sidebar-link">注释</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_1-仅注释业务逻辑" class="sidebar-link">1. 仅注释业务逻辑</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_2-删掉注释的代码" class="sidebar-link">2. 删掉注释的代码</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_3-不要记日记" class="sidebar-link">3. 不要记日记</a></li><li class="sidebar-sub-header"><a href="/more/clean/javascript.html#_4-避免位置标记" class="sidebar-link">4. 避免位置标记</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="变量"><a href="#变量" class="header-anchor">#</a> 变量</h2> <h3 id="_1-用有意义且常用的单词命名变量"><a href="#_1-用有意义且常用的单词命名变量" class="header-anchor">#</a> 1. 用有意义且常用的单词命名变量</h3> <p><strong>糟糕的：</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> yyyymmdstr <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">&quot;YYYY/MM/DD&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> currentDate <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">&quot;YYYY/MM/DD&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_2-同类型的变量命名保持一致"><a href="#_2-同类型的变量命名保持一致" class="header-anchor">#</a> 2. 同类型的变量命名保持一致</h3> <p><strong>糟糕的：</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">getUserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">getClientData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">getCustomerRecord</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">getUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_3-命名常量"><a href="#_3-命名常量" class="header-anchor">#</a> 3. 命名常量</h3> <p>对每一个常量都需要命名，具有语义更容易理解。</p> <p><strong>糟糕的：</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">setTimeout</span><span class="token punctuation">(</span>blastOff<span class="token punctuation">,</span> <span class="token number">86400000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token constant">MILLISECONDS_IN_A_DAY</span> <span class="token operator">=</span> <span class="token number">86400000</span><span class="token punctuation">;</span>

<span class="token function">setTimeout</span><span class="token punctuation">(</span>blastOff<span class="token punctuation">,</span> <span class="token constant">MILLISECONDS_IN_A_DAY</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_4-解释变量"><a href="#_4-解释变量" class="header-anchor">#</a> 4. 解释变量</h3> <p>常量需要命名，变量同样需要命名，ES6 提供的对象解构，数组解构可以解决该问题。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">&quot;One Infinite Loop, Cupertino 95014&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cityZipCodeRegex <span class="token operator">=</span> <span class="token regex">/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/</span><span class="token punctuation">;</span>
<span class="token function">saveCityZipCode</span><span class="token punctuation">(</span>
  address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">&quot;One Infinite Loop, Cupertino 95014&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cityZipCodeRegex <span class="token operator">=</span> <span class="token regex">/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> city<span class="token punctuation">,</span> zipCode<span class="token punctuation">]</span> <span class="token operator">=</span> address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">saveCityZipCode</span><span class="token punctuation">(</span>city<span class="token punctuation">,</span> zipCode<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_5-显示映射"><a href="#_5-显示映射" class="header-anchor">#</a> 5. 显示映射</h3> <p>现在的编辑器普遍具有良好的提示功能，没必要去简写某一个具有意义的单词，压缩代码的事情交给 Webpack 就可以了。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> locations <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;Austin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;New York&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;San Francisco&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
locations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">l</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">doStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">doSomeOtherStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
  <span class="token comment">// ...</span>
  <span class="token comment">// ...</span>
  <span class="token comment">// Wait, what is `l` for again?</span>
  <span class="token function">dispatch</span><span class="token punctuation">(</span>l<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> locations <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;Austin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;New York&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;San Francisco&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
locations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">location</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">doStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">doSomeOtherStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
  <span class="token comment">// ...</span>
  <span class="token comment">// ...</span>
  <span class="token function">dispatch</span><span class="token punctuation">(</span>location<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_6-避免无意义的前缀"><a href="#_6-避免无意义的前缀" class="header-anchor">#</a> 6. 避免无意义的前缀</h3> <p>当使用 Class/Object 时已经给予了形象的命名，就不必重复这个命名了。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Car <span class="token operator">=</span> <span class="token punctuation">{</span>
  carMake<span class="token operator">:</span> <span class="token string">&quot;Honda&quot;</span><span class="token punctuation">,</span>
  carModel<span class="token operator">:</span> <span class="token string">&quot;Accord&quot;</span><span class="token punctuation">,</span>
  carColor<span class="token operator">:</span> <span class="token string">&quot;Blue&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">paintCar</span><span class="token punctuation">(</span><span class="token parameter">car</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  car<span class="token punctuation">.</span>carColor <span class="token operator">=</span> <span class="token string">&quot;Red&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Car <span class="token operator">=</span> <span class="token punctuation">{</span>
  make<span class="token operator">:</span> <span class="token string">&quot;Honda&quot;</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token string">&quot;Accord&quot;</span><span class="token punctuation">,</span>
  color<span class="token operator">:</span> <span class="token string">&quot;Blue&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">paintCar</span><span class="token punctuation">(</span><span class="token parameter">car</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  car<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">&quot;Red&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_7-使用参数默认值"><a href="#_7-使用参数默认值" class="header-anchor">#</a> 7. 使用参数默认值</h3> <p>ES6新增了参数默认值，该值仅在传递的值为 <code>undefined</code> 时生效，所以需要注意该项的使用。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createMicrobrewery</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> breweryName <span class="token operator">=</span> name <span class="token operator">||</span> <span class="token string">&quot;Hipster Brew Co.&quot;</span><span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createMicrobrewery</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">&quot;Hipster Brew Co.&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="函数"><a href="#函数" class="header-anchor">#</a> 函数</h2> <h3 id="_1-更少的函数参数"><a href="#_1-更少的函数参数" class="header-anchor">#</a> 1. 更少的函数参数</h3> <p>函数的参数一个或两个最佳，便于测试函数的功能。当函数参数超过三个及以上时，使用 ES6 的解构语法。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> body<span class="token punctuation">,</span> buttonText<span class="token punctuation">,</span> cancellable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title<span class="token punctuation">,</span> body<span class="token punctuation">,</span> buttonText<span class="token punctuation">,</span> cancellable <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">&quot;Foo&quot;</span><span class="token punctuation">,</span>
  body<span class="token operator">:</span> <span class="token string">&quot;Bar&quot;</span><span class="token punctuation">,</span>
  buttonText<span class="token operator">:</span> <span class="token string">&quot;Baz&quot;</span><span class="token punctuation">,</span>
  cancellable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_2-函数单一原则"><a href="#_2-函数单一原则" class="header-anchor">#</a> 2. 函数单一原则</h3> <p>这是迄今为止软件工程中最重要的规则。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">emailClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">client</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">email</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">emailActiveClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  clients<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>isActiveClient<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">isActiveClient</span><span class="token punctuation">(</span><span class="token parameter">client</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_3-顾名思义"><a href="#_3-顾名思义" class="header-anchor">#</a> 3. 顾名思义</h3> <p>看到函数名就应该知道它是做什么的。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">addToDate</span><span class="token punctuation">(</span><span class="token parameter">date<span class="token punctuation">,</span> month</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// It's hard to tell from the function name what is added</span>
<span class="token function">addToDate</span><span class="token punctuation">(</span>date<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">addMonthToDate</span><span class="token punctuation">(</span><span class="token parameter">month<span class="token punctuation">,</span> date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">addMonthToDate</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_4-函数应该只有一层抽象"><a href="#_4-函数应该只有一层抽象" class="header-anchor">#</a> 4. 函数应该只有一层抽象</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">parseBetterJSAlternative</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token constant">REGEXES</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> statements <span class="token operator">=</span> code<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> tokens <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token constant">REGEXES</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">REGEX</span></span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    statements<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">statement</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> ast <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  tokens<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">token</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// lex...</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  ast<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">node</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// parse...</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">parseBetterJSAlternative</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> tokens <span class="token operator">=</span> <span class="token function">tokenize</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> syntaxTree <span class="token operator">=</span> <span class="token function">parse</span><span class="token punctuation">(</span>tokens<span class="token punctuation">)</span><span class="token punctuation">;</span>
  syntaxTree<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">node</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// parse...</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">tokenize</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token constant">REGEXES</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> statements <span class="token operator">=</span> code<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> tokens <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token constant">REGEXES</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">REGEX</span></span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    statements<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">statement</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> tokens<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">parse</span><span class="token punctuation">(</span><span class="token parameter">tokens</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> syntaxTree <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  tokens<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">token</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    syntaxTree<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> syntaxTree<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_5-删除重复的代码"><a href="#_5-删除重复的代码" class="header-anchor">#</a> 5. 删除重复的代码</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">showDeveloperList</span><span class="token punctuation">(</span><span class="token parameter">developers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  developers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">developer</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> expectedSalary <span class="token operator">=</span> developer<span class="token punctuation">.</span><span class="token function">calculateExpectedSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> experience <span class="token operator">=</span> developer<span class="token punctuation">.</span><span class="token function">getExperience</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> githubLink <span class="token operator">=</span> developer<span class="token punctuation">.</span><span class="token function">getGithubLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
      expectedSalary<span class="token punctuation">,</span>
      experience<span class="token punctuation">,</span>
      githubLink
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">showManagerList</span><span class="token punctuation">(</span><span class="token parameter">managers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  managers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">manager</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> expectedSalary <span class="token operator">=</span> manager<span class="token punctuation">.</span><span class="token function">calculateExpectedSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> experience <span class="token operator">=</span> manager<span class="token punctuation">.</span><span class="token function">getExperience</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> portfolio <span class="token operator">=</span> manager<span class="token punctuation">.</span><span class="token function">getMBAProjects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
      expectedSalary<span class="token punctuation">,</span>
      experience<span class="token punctuation">,</span>
      portfolio
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 使用 switch 判断</span>
<span class="token keyword">function</span> <span class="token function">showEmployeeList</span><span class="token punctuation">(</span><span class="token parameter">employees</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  employees<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">employee</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> expectedSalary <span class="token operator">=</span> employee<span class="token punctuation">.</span><span class="token function">calculateExpectedSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> experience <span class="token operator">=</span> employee<span class="token punctuation">.</span><span class="token function">getExperience</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
      expectedSalary<span class="token punctuation">,</span>
      experience
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">switch</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;manager&quot;</span><span class="token operator">:</span>
        data<span class="token punctuation">.</span>portfolio <span class="token operator">=</span> employee<span class="token punctuation">.</span><span class="token function">getMBAProjects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;developer&quot;</span><span class="token operator">:</span>
        data<span class="token punctuation">.</span>githubLink <span class="token operator">=</span> employee<span class="token punctuation">.</span><span class="token function">getGithubLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_6-对象设置默认属性"><a href="#_6-对象设置默认属性" class="header-anchor">#</a> 6. 对象设置默认属性</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> menuConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  body<span class="token operator">:</span> <span class="token string">&quot;Bar&quot;</span><span class="token punctuation">,</span>
  buttonText<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  cancellable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  config<span class="token punctuation">.</span>title <span class="token operator">=</span> config<span class="token punctuation">.</span>title <span class="token operator">||</span> <span class="token string">&quot;Foo&quot;</span><span class="token punctuation">;</span>
  config<span class="token punctuation">.</span>body <span class="token operator">=</span> config<span class="token punctuation">.</span>body <span class="token operator">||</span> <span class="token string">&quot;Bar&quot;</span><span class="token punctuation">;</span>
  config<span class="token punctuation">.</span>buttonText <span class="token operator">=</span> config<span class="token punctuation">.</span>buttonText <span class="token operator">||</span> <span class="token string">&quot;Baz&quot;</span><span class="token punctuation">;</span>
  config<span class="token punctuation">.</span>cancellable <span class="token operator">=</span>
    config<span class="token punctuation">.</span>cancellable <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> config<span class="token punctuation">.</span>cancellable <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">createMenu</span><span class="token punctuation">(</span>menuConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> menuConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">&quot;Order&quot;</span><span class="token punctuation">,</span>
  <span class="token comment">// User did not include 'body' key</span>
  buttonText<span class="token operator">:</span> <span class="token string">&quot;Send&quot;</span><span class="token punctuation">,</span>
  cancellable<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  config <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>
    <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;Foo&quot;</span><span class="token punctuation">,</span>
      body<span class="token operator">:</span> <span class="token string">&quot;Bar&quot;</span><span class="token punctuation">,</span>
      buttonText<span class="token operator">:</span> <span class="token string">&quot;Baz&quot;</span><span class="token punctuation">,</span>
      cancellable<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    config
  <span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// config now equals: {title: &quot;Order&quot;, body: &quot;Bar&quot;, buttonText: &quot;Send&quot;, cancellable: true}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createMenu</span><span class="token punctuation">(</span>menuConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_7-不要给函数传递-flag"><a href="#_7-不要给函数传递-flag" class="header-anchor">#</a> 7. 不要给函数传递 flag</h3> <p>Flags 往往需要你的函数完成多项任务，然而对于多项任务，拆分为多个函数更合理。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> temp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>temp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">createTempFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_8-避免副作用（1）"><a href="#_8-避免副作用（1）" class="header-anchor">#</a> 8. 避免副作用（1）</h3> <p>函数接受一个值返回一个值，除此之外的行为都是副作用</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Global variable referenced by following function.</span>
<span class="token comment">// If we had another function that used this name, now it'd be an array and it could break it.</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">&quot;Ryan McDermott&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">splitIntoFirstAndLastName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> name<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">splitIntoFirstAndLastName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['Ryan', 'McDermott'];</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">splitIntoFirstAndLastName</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> name<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;Ryan McDermott&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> newName <span class="token operator">=</span> <span class="token function">splitIntoFirstAndLastName</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Ryan McDermott';</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['Ryan', 'McDermott'];</span>
</code></pre></div><h3 id="_9-避免副作用（2）"><a href="#_9-避免副作用（2）" class="header-anchor">#</a> 9. 避免副作用（2）</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">addItemToCart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">cart<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  cart<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token punctuation">,</span> date<span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">addItemToCart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">cart<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>cart<span class="token punctuation">,</span> <span class="token punctuation">{</span> item<span class="token punctuation">,</span> date<span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_10-避免全局函数"><a href="#_10-避免全局函数" class="header-anchor">#</a> 10. 避免全局函数</h3> <p>修改原型链获得的方法可能会与其他的库产生冲突。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">diff</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">diff</span><span class="token punctuation">(</span><span class="token parameter">comparisonArray</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> hash <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>comparisonArray<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">elem</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span>hash<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>elem<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">SuperArray</span> <span class="token keyword">extends</span> <span class="token class-name">Array</span> <span class="token punctuation">{</span>
  <span class="token function">diff</span><span class="token punctuation">(</span><span class="token parameter">comparisonArray</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> hash <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>comparisonArray<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">elem</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span>hash<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>elem<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_11-相对于命令式编程更喜欢函数式编程"><a href="#_11-相对于命令式编程更喜欢函数式编程" class="header-anchor">#</a> 11. 相对于命令式编程更喜欢函数式编程</h3> <p>函数式编程更清晰，更容易测试。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> programmerOutput <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Uncle Bobby&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">500</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Suzie Q&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">1500</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Jimmy Gosling&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">150</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Gracie Hopper&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">1000</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> totalOutput <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> programmerOutput<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  totalOutput <span class="token operator">+=</span> programmerOutput<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>linesOfCode<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> programmerOutput <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Uncle Bobby&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">500</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Suzie Q&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">1500</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Jimmy Gosling&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">150</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Gracie Hopper&quot;</span><span class="token punctuation">,</span>
    linesOfCode<span class="token operator">:</span> <span class="token number">1000</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> totalOutput <span class="token operator">=</span> programmerOutput<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token parameter">totalLines<span class="token punctuation">,</span> output</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> totalLines <span class="token operator">+</span> output<span class="token punctuation">.</span>linesOfCode<span class="token punctuation">,</span>
  <span class="token number">0</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_12-封装条件语句"><a href="#_12-封装条件语句" class="header-anchor">#</a> 12. 封装条件语句</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>fsm<span class="token punctuation">.</span>state <span class="token operator">===</span> <span class="token string">&quot;fetching&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>listNode<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">shouldShowSpinner</span><span class="token punctuation">(</span><span class="token parameter">fsm<span class="token punctuation">,</span> listNode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> fsm<span class="token punctuation">.</span>state <span class="token operator">===</span> <span class="token string">&quot;fetching&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>listNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">shouldShowSpinner</span><span class="token punctuation">(</span>fsmInstance<span class="token punctuation">,</span> listNodeInstance<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_13-避免取反条件"><a href="#_13-避免取反条件" class="header-anchor">#</a> 13. 避免取反条件</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isDOMNodeNotPresent</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isDOMNodeNotPresent</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isDOMNodePresent</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isDOMNodePresent</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_14-避免条件语句"><a href="#_14-避免条件语句" class="header-anchor">#</a> 14. 避免条件语句</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  <span class="token function">getCruisingAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">&quot;777&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPassengerCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;Air Force One&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">case</span> <span class="token string">&quot;Cessna&quot;</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFuelExpenditure</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Boeing777</span> <span class="token keyword">extends</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  <span class="token function">getCruisingAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPassengerCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">AirForceOne</span> <span class="token keyword">extends</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  <span class="token function">getCruisingAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Cessna</span> <span class="token keyword">extends</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  <span class="token function">getCruisingAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMaxAltitude</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFuelExpenditure</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_15-避免类型检查（1）"><a href="#_15-避免类型检查（1）" class="header-anchor">#</a> 15. 避免类型检查（1）</h3> <p>JavaScript 是无类型的，意味着你可以传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。相对于检查类型更应当约束我们的 API。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">travelToTexas</span><span class="token punctuation">(</span><span class="token parameter">vehicle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle <span class="token keyword">instanceof</span> <span class="token class-name">Bicycle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    vehicle<span class="token punctuation">.</span><span class="token function">pedal</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>currentLocation<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Location</span><span class="token punctuation">(</span><span class="token string">&quot;texas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle <span class="token keyword">instanceof</span> <span class="token class-name">Car</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    vehicle<span class="token punctuation">.</span><span class="token function">drive</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>currentLocation<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Location</span><span class="token punctuation">(</span><span class="token string">&quot;texas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">travelToTexas</span><span class="token punctuation">(</span><span class="token parameter">vehicle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  vehicle<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>currentLocation<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Location</span><span class="token punctuation">(</span><span class="token string">&quot;texas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_16-避免类型检查（2）"><a href="#_16-避免类型检查（2）" class="header-anchor">#</a> 16. 避免类型检查（2）</h3> <p>如果需要做静态类型的检查，比如字符串、整数等，推荐使用 TypeScript，或约束好 API。</p> <p><strong>糟糕的：</strong></p> <div class="language-JS extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">combine</span><span class="token punctuation">(</span><span class="token parameter">val1<span class="token punctuation">,</span> val2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token keyword">typeof</span> val1 <span class="token operator">===</span> <span class="token string">&quot;number&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> val2 <span class="token operator">===</span> <span class="token string">&quot;number&quot;</span><span class="token punctuation">)</span> <span class="token operator">||</span>
    <span class="token punctuation">(</span><span class="token keyword">typeof</span> val1 <span class="token operator">===</span> <span class="token string">&quot;string&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> val2 <span class="token operator">===</span> <span class="token string">&quot;string&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> val1 <span class="token operator">+</span> val2<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;Must be of type String or Number&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-JS extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">combine</span><span class="token punctuation">(</span><span class="token parameter">val1<span class="token punctuation">,</span> val2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> val1 <span class="token operator">+</span> val2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_17-不要过度优化"><a href="#_17-不要过度优化" class="header-anchor">#</a> 17. 不要过度优化</h3> <p>下面的例子以前常犯。</p> <p><strong>糟糕的：</strong></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// On old browsers, each iteration with uncached `list.length` would be costly</span>
<span class="token comment">// because of `list.length` recomputation. In modern browsers, this is optimized.</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_18-删除废弃代码"><a href="#_18-删除废弃代码" class="header-anchor">#</a> 18. 删除废弃代码</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">oldRequestModule</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">newRequestModule</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> req <span class="token operator">=</span> newRequestModule<span class="token punctuation">;</span>
<span class="token function">inventoryTracker</span><span class="token punctuation">(</span><span class="token string">&quot;apples&quot;</span><span class="token punctuation">,</span> req<span class="token punctuation">,</span> <span class="token string">&quot;www.inventory-awesome.io&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">newRequestModule</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> req <span class="token operator">=</span> newRequestModule<span class="token punctuation">;</span>
<span class="token function">inventoryTracker</span><span class="token punctuation">(</span><span class="token string">&quot;apples&quot;</span><span class="token punctuation">,</span> req<span class="token punctuation">,</span> <span class="token string">&quot;www.inventory-awesome.io&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="对象和数据结构"><a href="#对象和数据结构" class="header-anchor">#</a> 对象和数据结构</h2> <h3 id="_1-使用-getters-和-setters"><a href="#_1-使用-getters-和-setters" class="header-anchor">#</a> 1. 使用 getters 和 setters</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">makeBankAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    balance<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> account <span class="token operator">=</span> <span class="token function">makeBankAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
account<span class="token punctuation">.</span>balance <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">makeBankAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// this one is private</span>
  <span class="token keyword">let</span> balance <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

  <span class="token comment">// a &quot;getter&quot;, made public via the returned object below</span>
  <span class="token keyword">function</span> <span class="token function">getBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> balance<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// a &quot;setter&quot;, made public via the returned object below</span>
  <span class="token keyword">function</span> <span class="token function">setBalance</span><span class="token punctuation">(</span><span class="token parameter">amount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ... validate before updating the balance</span>
    balance <span class="token operator">=</span> amount<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    getBalance<span class="token punctuation">,</span>
    setBalance
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> account <span class="token operator">=</span> <span class="token function">makeBankAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
account<span class="token punctuation">.</span><span class="token function">setBalance</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_2-使用私有变量"><a href="#_2-使用私有变量" class="header-anchor">#</a> 2. 使用私有变量</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Employee</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Employee</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> employee <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Employee</span><span class="token punctuation">(</span><span class="token string">&quot;John Doe&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Employee name: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>employee<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Employee name: John Doe</span>
<span class="token keyword">delete</span> employee<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Employee name: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>employee<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Employee name: undefined</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">makeEmployee</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> name<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> employee <span class="token operator">=</span> <span class="token function">makeEmployee</span><span class="token punctuation">(</span><span class="token string">&quot;John Doe&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Employee name: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>employee<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Employee name: John Doe</span>
<span class="token keyword">delete</span> employee<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Employee name: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>employee<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Employee name: John Doe</span>
</code></pre></div><h2 id="类"><a href="#类" class="header-anchor">#</a> 类</h2> <h3 id="_1-使用-class"><a href="#_1-使用-class" class="header-anchor">#</a> 1. 使用 Class</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Animal</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Animal</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;Instantiate Animal with `new`&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Animal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">move</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">Mammal</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">age<span class="token punctuation">,</span> furColor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Mammal</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;Instantiate Mammal with `new`&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">Animal</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>furColor <span class="token operator">=</span> furColor<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Mammal</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Animal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Mammal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Mammal<span class="token punctuation">;</span>
<span class="token class-name">Mammal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">liveBirth</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">liveBirth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">Human</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">age<span class="token punctuation">,</span> furColor<span class="token punctuation">,</span> languageSpoken</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Human</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;Instantiate Human with `new`&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">Mammal</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> age<span class="token punctuation">,</span> furColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>languageSpoken <span class="token operator">=</span> languageSpoken<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Human</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Mammal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Human</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Human<span class="token punctuation">;</span>
<span class="token class-name">Human</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">speak</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">speak</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">/* ... */</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Mammal</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">age<span class="token punctuation">,</span> furColor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>furColor <span class="token operator">=</span> furColor<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">liveBirth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">/* ... */</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Human</span> <span class="token keyword">extends</span> <span class="token class-name">Mammal</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">age<span class="token punctuation">,</span> furColor<span class="token punctuation">,</span> languageSpoken</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>age<span class="token punctuation">,</span> furColor<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>languageSpoken <span class="token operator">=</span> languageSpoken<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">speak</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">/* ... */</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-链式调用"><a href="#_2-链式调用" class="header-anchor">#</a> 2. 链式调用</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token punctuation">,</span> model<span class="token punctuation">,</span> color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setMake</span><span class="token punctuation">(</span><span class="token parameter">make</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setModel</span><span class="token punctuation">(</span><span class="token parameter">model</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setColor</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>make<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> car <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Car</span><span class="token punctuation">(</span><span class="token string">&quot;Ford&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;F-150&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
car<span class="token punctuation">.</span><span class="token function">setColor</span><span class="token punctuation">(</span><span class="token string">&quot;pink&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
car<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token punctuation">,</span> model<span class="token punctuation">,</span> color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setMake</span><span class="token punctuation">(</span><span class="token parameter">make</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make<span class="token punctuation">;</span>
    <span class="token comment">// NOTE: Returning this for chaining</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setModel</span><span class="token punctuation">(</span><span class="token parameter">model</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model<span class="token punctuation">;</span>
    <span class="token comment">// NOTE: Returning this for chaining</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setColor</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
    <span class="token comment">// NOTE: Returning this for chaining</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>make<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// NOTE: Returning this for chaining</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> car <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Car</span><span class="token punctuation">(</span><span class="token string">&quot;Ford&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;F-150&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setColor</span><span class="token punctuation">(</span><span class="token string">&quot;pink&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_3-继承的组合"><a href="#_3-继承的组合" class="header-anchor">#</a> 3. 继承的组合</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Employee</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>email <span class="token operator">=</span> email<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// Bad because Employees &quot;have&quot; tax data. EmployeeTaxData is not a type of Employee</span>
<span class="token keyword">class</span> <span class="token class-name">EmployeeTaxData</span> <span class="token keyword">extends</span> <span class="token class-name">Employee</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">ssn<span class="token punctuation">,</span> salary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ssn <span class="token operator">=</span> ssn<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>salary <span class="token operator">=</span> salary<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">EmployeeTaxData</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">ssn<span class="token punctuation">,</span> salary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ssn <span class="token operator">=</span> ssn<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>salary <span class="token operator">=</span> salary<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Employee</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>email <span class="token operator">=</span> email<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setTaxData</span><span class="token punctuation">(</span><span class="token parameter">ssn<span class="token punctuation">,</span> salary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>taxData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EmployeeTaxData</span><span class="token punctuation">(</span>ssn<span class="token punctuation">,</span> salary<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="solid"><a href="#solid" class="header-anchor">#</a> SOLID</h2> <p>SOLID 是几个单词的首字母组合而来，分表表示单一功能原则、开闭原则、里氏替换原则、接口隔离原则、依赖反转原则。</p> <h3 id="_1-单一功能原则"><a href="#_1-单一功能原则" class="header-anchor">#</a> 1. 单一功能原则</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">UserSettings</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">=</span> user<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">changeSettings</span><span class="token punctuation">(</span><span class="token parameter">settings</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyCredentials</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token function">verifyCredentials</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">UserAuth</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">=</span> user<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">verifyCredentials</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">UserSettings</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>user <span class="token operator">=</span> user<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>auth <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">UserAuth</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">changeSettings</span><span class="token punctuation">(</span><span class="token parameter">settings</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>auth<span class="token punctuation">.</span><span class="token function">verifyCredentials</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-开闭原则"><a href="#_2-开闭原则" class="header-anchor">#</a> 2. 开闭原则</h3> <p>“开” 指的是类、模块、函数都应该具有可扩展性，“闭” 指的是它们不应该被修改。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">AjaxAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">Adapter</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;ajaxAdapter&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">NodeAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">Adapter</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;nodeAdapter&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">HttpRequester</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">adapter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>adapter <span class="token operator">=</span> adapter<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>adapter<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">&quot;ajaxAdapter&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">makeAjaxCall</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// transform response and return</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>adapter<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">&quot;nodeAdapter&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">makeHttpCall</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// transform response and return</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">makeAjaxCall</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// request and return promise</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">makeHttpCall</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// request and return promise</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">AjaxAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">Adapter</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;ajaxAdapter&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// request and return promise</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">NodeAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">Adapter</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;nodeAdapter&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// request and return promise</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">HttpRequester</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">adapter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>adapter <span class="token operator">=</span> adapter<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>adapter<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// transform response and return</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_3-里氏替换原则"><a href="#_3-里氏替换原则" class="header-anchor">#</a> 3. 里氏替换原则</h3> <p>子类不要去重写父类的方法。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Rectangle</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setColor</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">area</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>

  <span class="token function">setWidth</span><span class="token punctuation">(</span><span class="token parameter">width</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> width<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token parameter">height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Square</span> <span class="token keyword">extends</span> <span class="token class-name">Rectangle</span> <span class="token punctuation">{</span>
  <span class="token function">setWidth</span><span class="token punctuation">(</span><span class="token parameter">width</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> width<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> width<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token parameter">height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> height<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">renderLargeRectangles</span><span class="token punctuation">(</span><span class="token parameter">rectangles</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  rectangles<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">rectangle</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    rectangle<span class="token punctuation">.</span><span class="token function">setWidth</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    rectangle<span class="token punctuation">.</span><span class="token function">setHeight</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> area <span class="token operator">=</span> rectangle<span class="token punctuation">.</span><span class="token function">getArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// BAD: Returns 25 for Square. Should be 20.</span>
    rectangle<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>area<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> rectangles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Rectangle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Rectangle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Square</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">renderLargeRectangles</span><span class="token punctuation">(</span>rectangles<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span>
  <span class="token function">setColor</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">area</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Rectangle</span> <span class="token keyword">extends</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">width<span class="token punctuation">,</span> height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> width<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Square</span> <span class="token keyword">extends</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> length<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">renderLargeShapes</span><span class="token punctuation">(</span><span class="token parameter">shapes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  shapes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">shape</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> area <span class="token operator">=</span> shape<span class="token punctuation">.</span><span class="token function">getArea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    shape<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>area<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> shapes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Rectangle</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Rectangle</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Square</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">renderLargeShapes</span><span class="token punctuation">(</span>shapes<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_4-接口隔离原则"><a href="#_4-接口隔离原则" class="header-anchor">#</a> 4. 接口隔离原则</h3> <p>JavaScript 几乎没有接口的概念，所以这条原则很少被使用。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">DOMTraverser</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">settings</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>settings <span class="token operator">=</span> settings<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>rootNode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>settings<span class="token punctuation">.</span>rootNode<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>animationModule<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">traverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> $ <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">DOMTraverser</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  rootNode<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;body&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function">animationModule</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// Most of the time, we won't need to animate when traversing.</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">DOMTraverser</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">settings</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>settings <span class="token operator">=</span> settings<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>options <span class="token operator">=</span> settings<span class="token punctuation">.</span>options<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>rootNode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>settings<span class="token punctuation">.</span>rootNode<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setupOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setupOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>animationModule<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token function">traverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> $ <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">DOMTraverser</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  rootNode<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;body&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  options<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">animationModule</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_5-依赖反转原则"><a href="#_5-依赖反转原则" class="header-anchor">#</a> 5. 依赖反转原则</h3> <p>总的来说就是：解耦。</p> <ol><li>高层次模块不能依赖低层次模块，它们依赖于抽象接口；</li> <li>抽象接口不能依赖具体实现，具体实现依赖抽象接口。</li></ol> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">InventoryRequester</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token constant">REQ_METHODS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;HTTP&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">requestItem</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">InventoryTracker</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>items <span class="token operator">=</span> items<span class="token punctuation">;</span>

    <span class="token comment">// BAD: We have created a dependency on a specific request implementation.</span>
    <span class="token comment">// We should just have requestItems depend on a request method: `request`</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>requester <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">InventoryRequester</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">requestItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>requester<span class="token punctuation">.</span><span class="token function">requestItem</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> inventoryTracker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">InventoryTracker</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;apples&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;bananas&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
inventoryTracker<span class="token punctuation">.</span><span class="token function">requestItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">InventoryTracker</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">items<span class="token punctuation">,</span> requester</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>items <span class="token operator">=</span> items<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>requester <span class="token operator">=</span> requester<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">requestItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>requester<span class="token punctuation">.</span><span class="token function">requestItem</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">InventoryRequesterV1</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token constant">REQ_METHODS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;HTTP&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">requestItem</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">InventoryRequesterV2</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token constant">REQ_METHODS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;WS&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">requestItem</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// By constructing our dependencies externally and injecting them, we can easily</span>
<span class="token comment">// substitute our request module for a fancy new one that uses WebSockets.</span>
<span class="token keyword">const</span> inventoryTracker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">InventoryTracker</span><span class="token punctuation">(</span>
  <span class="token punctuation">[</span><span class="token string">&quot;apples&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;bananas&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">InventoryRequesterV2</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
inventoryTracker<span class="token punctuation">.</span><span class="token function">requestItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="测试"><a href="#测试" class="header-anchor">#</a> 测试</h2> <h3 id="_1-单一测试"><a href="#_1-单一测试" class="header-anchor">#</a> 1. 单一测试</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> assert <span class="token keyword">from</span> <span class="token string">&quot;assert&quot;</span><span class="token punctuation">;</span>

<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&quot;MakeMomentJSGreatAgain&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&quot;handles date boundaries&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> date<span class="token punctuation">;</span>

    date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;1/1/2015&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;1/31/2015&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>

    date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;2/1/2016&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;02/29/2016&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>

    date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;2/1/2015&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;03/01/2015&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> assert <span class="token keyword">from</span> <span class="token string">&quot;assert&quot;</span><span class="token punctuation">;</span>

<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&quot;MakeMomentJSGreatAgain&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&quot;handles 30-day months&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;1/1/2015&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;1/31/2015&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&quot;handles leap year&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;2/1/2016&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;02/29/2016&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&quot;handles non-leap year&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MakeMomentJSGreatAgain</span><span class="token punctuation">(</span><span class="token string">&quot;2/1/2015&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    date<span class="token punctuation">.</span><span class="token function">addDays</span><span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token string">&quot;03/01/2015&quot;</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="并发"><a href="#并发" class="header-anchor">#</a> 并发</h2> <h3 id="_1-使用-promise-替代回调函数"><a href="#_1-使用-promise-替代回调函数" class="header-anchor">#</a> 1. 使用 Promise 替代回调函数</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;request&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> writeFile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;fs&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">get</span><span class="token punctuation">(</span>
  <span class="token string">&quot;https://en.wikipedia.org/wiki/Robert_Cecil_Martin&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">(</span><span class="token parameter">requestErr<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>requestErr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>requestErr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;article.html&quot;</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token parameter">writeErr</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>writeErr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>writeErr<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;File written&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;request&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> writeFile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;fs&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;https://en.wikipedia.org/wiki/Robert_Cecil_Martin&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;article.html&quot;</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;File written&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_2-async-await-比-promise-更简洁"><a href="#_2-async-await-比-promise-更简洁" class="header-anchor">#</a> 2. Async/Await 比 Promise 更简洁</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;request-promise&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> writeFile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;fs-promise&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;https://en.wikipedia.org/wiki/Robert_Cecil_Martin&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;article.html&quot;</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;File written&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">get</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;request-promise&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> writeFile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;fs-promise&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getCleanCodeArticle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">get</span><span class="token punctuation">(</span>
      <span class="token string">&quot;https://en.wikipedia.org/wiki/Robert_Cecil_Martin&quot;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">await</span> <span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">&quot;article.html&quot;</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;File written&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="错误处理"><a href="#错误处理" class="header-anchor">#</a> 错误处理</h2> <h3 id="_1-不要忽略抛出异常"><a href="#_1-不要忽略抛出异常" class="header-anchor">#</a> 1. 不要忽略抛出异常</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">try</span> <span class="token punctuation">{</span>
  <span class="token function">functionThatMightThrow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">try</span> <span class="token punctuation">{</span>
  <span class="token function">functionThatMightThrow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// One option (more noisy than console.log):</span>
  console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// Another option:</span>
  <span class="token function">notifyUserOfError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// Another option:</span>
  <span class="token function">reportErrorToService</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// OR do all three!</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-不要忽略抛出-promise-异常"><a href="#_2-不要忽略抛出-promise-异常" class="header-anchor">#</a> 2. 不要忽略抛出 Promise 异常</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">getdata</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">functionThatMightThrow</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">getdata</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">functionThatMightThrow</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// One option (more noisy than console.log):</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// Another option:</span>
    <span class="token function">notifyUserOfError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// Another option:</span>
    <span class="token function">reportErrorToService</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// OR do all three!</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="格式"><a href="#格式" class="header-anchor">#</a> 格式</h2> <h3 id="_1-常量大写"><a href="#_1-常量大写" class="header-anchor">#</a> 1. 常量大写</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">DAYS_IN_WEEK</span> <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> daysInMonth <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> songs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;Back In Black&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Stairway to Heaven&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Hey Jude&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Artists <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;ACDC&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Led Zeppelin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;The Beatles&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">eraseDatabase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">restore_database</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Alpaca</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">DAYS_IN_WEEK</span> <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">DAYS_IN_MONTH</span> <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token constant">SONGS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;Back In Black&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Stairway to Heaven&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Hey Jude&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">ARTISTS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;ACDC&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Led Zeppelin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;The Beatles&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">eraseDatabase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">restoreDatabase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Alpaca</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-先声明后调用"><a href="#_2-先声明后调用" class="header-anchor">#</a> 2. 先声明后调用</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">PerformanceReview</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>employee <span class="token operator">=</span> employee<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">lookupPeers</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> db<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>employee<span class="token punctuation">,</span> <span class="token string">&quot;peers&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">lookupManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> db<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>employee<span class="token punctuation">,</span> <span class="token string">&quot;manager&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getPeerReviews</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> peers <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">lookupPeers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>

  <span class="token function">perfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPeerReviews</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getManagerReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getSelfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getManagerReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> manager <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">lookupManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getSelfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> review <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">PerformanceReview</span><span class="token punctuation">(</span>employee<span class="token punctuation">)</span><span class="token punctuation">;</span>
review<span class="token punctuation">.</span><span class="token function">perfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">PerformanceReview</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>employee <span class="token operator">=</span> employee<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">perfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPeerReviews</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getManagerReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getSelfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getPeerReviews</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> peers <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">lookupPeers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>

  <span class="token function">lookupPeers</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> db<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>employee<span class="token punctuation">,</span> <span class="token string">&quot;peers&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getManagerReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> manager <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">lookupManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">lookupManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> db<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>employee<span class="token punctuation">,</span> <span class="token string">&quot;manager&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getSelfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> review <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">PerformanceReview</span><span class="token punctuation">(</span>employee<span class="token punctuation">)</span><span class="token punctuation">;</span>
review<span class="token punctuation">.</span><span class="token function">perfReview</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="注释"><a href="#注释" class="header-anchor">#</a> 注释</h2> <h3 id="_1-仅注释业务逻辑"><a href="#_1-仅注释业务逻辑" class="header-anchor">#</a> 1. 仅注释业务逻辑</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">hashIt</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// The hash</span>
  <span class="token keyword">let</span> hash <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

  <span class="token comment">// Length of string</span>
  <span class="token keyword">const</span> length <span class="token operator">=</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

  <span class="token comment">// Loop through every character in data</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Get character code.</span>
    <span class="token keyword">const</span> char <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// Make the hash</span>
    hash <span class="token operator">=</span> <span class="token punctuation">(</span>hash <span class="token operator">&lt;&lt;</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">-</span> hash <span class="token operator">+</span> char<span class="token punctuation">;</span>
    <span class="token comment">// Convert to 32-bit integer</span>
    hash <span class="token operator">&amp;=</span> hash<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">hashIt</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> hash <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> length <span class="token operator">=</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> char <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    hash <span class="token operator">=</span> <span class="token punctuation">(</span>hash <span class="token operator">&lt;&lt;</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">-</span> hash <span class="token operator">+</span> char<span class="token punctuation">;</span>

    <span class="token comment">// Convert to 32-bit integer</span>
    hash <span class="token operator">&amp;=</span> hash<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-删掉注释的代码"><a href="#_2-删掉注释的代码" class="header-anchor">#</a> 2. 删掉注释的代码</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">doStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// doOtherStuff();</span>
<span class="token comment">// doSomeMoreStuff();</span>
<span class="token comment">// doSoMuchStuff();</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">doStuff</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_3-不要记日记"><a href="#_3-不要记日记" class="header-anchor">#</a> 3. 不要记日记</h3> <p>已经不是远古时代了，日记留给 git，提交更好的 commit 记录吧。</p> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * 2016-12-20: Removed monads, didn't understand them (RM)
 * 2016-10-01: Improved using special monads (JP)
 * 2016-02-03: Removed type-checking (LI)
 * 2015-03-14: Added combine with type-checking (JR)
 */</span>
<span class="token keyword">function</span> <span class="token function">combine</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">combine</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-避免位置标记"><a href="#_4-避免位置标记" class="header-anchor">#</a> 4. 避免位置标记</h3> <p><strong>糟糕的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">////////////////////////////////////////////////////////////////////////////////</span>
<span class="token comment">// Scope Model Instantiation</span>
<span class="token comment">////////////////////////////////////////////////////////////////////////////////</span>
$scope<span class="token punctuation">.</span>model <span class="token operator">=</span> <span class="token punctuation">{</span>
  menu<span class="token operator">:</span> <span class="token string">&quot;foo&quot;</span><span class="token punctuation">,</span>
  nav<span class="token operator">:</span> <span class="token string">&quot;bar&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">////////////////////////////////////////////////////////////////////////////////</span>
<span class="token comment">// Action setup</span>
<span class="token comment">////////////////////////////////////////////////////////////////////////////////</span>
<span class="token keyword">const</span> <span class="token function-variable function">actions</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>良好的：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>$scope<span class="token punctuation">.</span>model <span class="token operator">=</span> <span class="token punctuation">{</span>
  menu<span class="token operator">:</span> <span class="token string">&quot;foo&quot;</span><span class="token punctuation">,</span>
  nav<span class="token operator">:</span> <span class="token string">&quot;bar&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">actions</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2020年3月17日星期二下午2点47分</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/more/clean/docs.html" class="prev">
        文档 风格指南
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.1f0f93c9.js" defer></script><script src="/assets/js/2.f28f3227.js" defer></script><script src="/assets/js/79.14676976.js" defer></script><script src="/assets/js/3.a7eaa85f.js" defer></script>
  </body>
</html>
